<template>
  <el-row :gutter="15" v-if="type == 4">
    <el-col :span="6">
      <scene-video v-if="liveInfo != null"></scene-video>
      <div class="mt-15">
        <scene-live-group
          v-if="liveInfo != null"
          :id="id"
          :type="type"
          :data="liveInfo"
          :groupData="lastGroup"
        ></scene-live-group>
      </div>
    </el-col>

    <el-col :span="6">
      <scene-sale v-if="liveInfo != null" :id="id" :type="type"></scene-sale>
    </el-col>
    <el-col :span="12">
      <scene-msg v-if="liveInfo != null" :id="id" :type="type"></scene-msg>
    </el-col>
  </el-row>

  <el-row :gutter="15" v-else>
    <el-col :span="12">
      <el-row :gutter="15">
        <el-col :span="12">
          <scene-video v-if="liveInfo != null" :data="liveInfo"></scene-video>
        </el-col>
        <el-col :span="12">
          <current-group
            v-if="liveInfo != null"
            :groupData="lastGroup"
          ></current-group>
        </el-col>
      </el-row>
      <div class="mt-15">
        <scene-last-group
          v-if="liveInfo != null"
          :data="liveInfo"
          :groupData="lastGroup"
        ></scene-last-group>
      </div>
    </el-col>

    <el-col :span="12">
      <scene-msg v-if="liveInfo != null" :id="id" :type="type"></scene-msg>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted, nextTick, provide} from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  InfoFilled,
  Edit,
  Search,
  Download,
  Refresh,
  ChatDotRound,
  ArrowDown,
} from "@element-plus/icons-vue";
import { $getVideo, $getLastGroup } from "@api/live";
import SceneMsg from "./SceneMsg.vue";
import SceneSale from "./SceneSale.vue";
import SceneLastGroup from "./SceneLastGroup.vue";
import SceneVideo from "./SceneVideo.vue";
import CurrentGroup from "./CurrentGroup.vue";
const props = defineProps({
  id: {
    type: String,
    default: "",
  },
  type: {
    type: String,
    default: "",
  },
});
provide("liveId", props.id);
provide("liveType", props.type);
console.log(props.id);

const liveInfo = ref(null);
const lastGroup = ref(null);

onMounted(() => {
  getData();
  getGroupLive();
});
const getData = async () => {
  let res = await $getVideo({ live_id: props.id });
  console.log(res);
  if (res.code == 0) {
    liveInfo.value = res.data;
  }
};

const getGroupLive = async () => {
  let res = await $getLastGroup({live_id:props.id});
  console.log(res);
  if (res.code == 0) {
    lastGroup.value = res.data.table;
  }
};
</script>
<style>
.msg-cont {
  .el-card__body {
    padding: 0;
  }
}
.ec2-btncon {
  .el-button {
    margin-bottom: 2px;
    justify-content: flex-start;
  }
  .el-button + .el-button {
    margin-left: 0;
  }
}
</style>
<style scoped lang="scss">
.list {
  .item-message {
  }
  color: var(--el-text-color-regular);
  .head {
    display: table;
    background: rgb(236, 239, 245);
    padding-top: 24px;
    padding-bottom: 20px;
    width: 100%;
    font-size: 14px;
    li {
      display: table-cell;
      box-sizing: border-box;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
      word-break: break-all;
      line-height: 23px;
      padding: 0 12px;
      font-weight: 600;
    }
  }
  .content {
    display: table-row;
    width: 100%;
    font-size: 13px;
    &:nth-child(even) {
      background-color: var(--el-fill-color-lighter); /* 双行交替色 */
    }
    &:hover {
      background-color: #f5f7fa;
    }
    li {
      display: table-cell;
      padding: 8px 0;
      min-width: 0;
      box-sizing: border-box;
      text-overflow: ellipsis;
      vertical-align: middle;
      position: relative;
      z-index: var(--el-table-index);
      border-bottom: 1px solid #ebeef5;
      .cell {
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-all;
        line-height: 23px;
        padding: 0 12px;
      }
    }
  }
  .more {
    text-align: center;
    font-size: 13px;
    padding: 10px;
    color: #606366;
  }
}
.operate {
  height: 200px;
}
.scroll {
  height: calc(100vh - 350px);
}
.sale-scroll {
  height: calc(100vh - 114px);
}
.ec2-btncon {
  display: flex;
  flex-direction: column;
}
.primaryColor {
  color: var(--el-color-primary);
}
</style>
